@include('public.page_styles')
  <link rel="stylesheet" href="{{ asset("/AdminLTE/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css") }}">
<link rel="stylesheet" href="{{ asset("/AdminLTE/bower_components/bootstrap-daterangepicker/daterangepicker.css") }}">
<style>
    .searchInput{
        width: 292px;
        height: 34px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
    }

    .block {
        border: 1px solid #ccc;
        background: white;
        margin: 1em 0em;
    }
</style>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
  @include('public.top')
  <!-- Left side column. contains the logo and sidebar -->
  @include('public.sidebar')
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper" >
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
          {{ trans('message.money') }}
        <small>{{ trans('message.dataStatic') }}</small>
      </h1>
      <ol class="breadcrumb">
        <li><a ><i class="fa fa-dashboard"></i> {{ trans('message.home') }}</a></li>
        <li><a >{{ trans('message.dataStatic') }}</a></li>
        <li class="active">{{ trans('message.money') }}{{ trans('message.dataStatic') }}</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content" >
      <div class="row">
        <div class="col-xs-12">
          <div class="box">
              <div class="box-header">
                  <div class="pull-right">
                      <div class="btn-group pull-right" style="margin-right: 10px">
                          <span>
                            <a class="btn btn-sm btn-primary grid-refresh" onclick="refresh()"><i class="fa fa-refresh"></i> {{ trans('message.refresh') }}</a>
                          </span>
                      </div>
                  </div>
                  <form class="form_search" action="{{ url('order/order_money/chart') }}" method="GET" style="margin-bottom:10px">
                      <div style="float:left;margin-right:5px">
                          <label>选择日期</label>
                          <div id="reportrange" class="dateRange">
                              <input  class="searchInput " id="searchDateRange" name="validity" value="{{ $validity }}">
                          </div>
                      </div>
                      <div style="float:left;margin-right:5px">
                          <label>网点</label>
                          <select class="form-control" name="shopS">
                              <option value=""  class="input-xlarge option" >全部</option>
                              @if($bankShop)
                                  @foreach($bankShop as $shop)
                                      <option value="{{ $shop->id }}" @if($shopS == $shop->id ) selected @endif>{{ $shop->shopName }}</option>
                                  @endforeach
                              @endif
                          </select>
                      </div>
                      <div class="btn-toolbar" style="padding-top:25px;padding-bottom:0px;margin-bottom:0px">
                          <button type="submit" class="btn btn-primary">检索</button>
                      </div>
                  </form>
              </div>

            <!-- /.box-header -->
            <div class="box-body">
              <table id="example1" class="table table-bordered table-striped">
                <thead>
                  <tr>
                      <th>订单日期</th>
                      <th>所属网点</th>
                      <th>应收金额</th>
                      <th>实收金额</th>
                      <th>优惠金额</th>
                      <th>收益小计</th>
                  </tr>
                </thead>
                <tbody>
                @if($orderStatistics)
                    @foreach($orderStatistics as $statistic)
                        <tr>
                            <td>{{ $statistic['times'] }}</td>
                            <td>
                                @if($statistic['bank_id'])
                                    @if($bankShowI = DB::table('bank_show')->where('id',$statistic['bank_id'])->pluck('shopName'))
                                        {{  $bankShowI[0]}}
                                    @endif
                                @endif
                            </td>
                            <td>{{ $statistic['yfMoney'] }}</td>
                            <td>{{ $statistic['sfMoney'] }}</td>
                            <td>{{ $statistic['dcTotalMoney'] }}</td>
                            <td>{{ $statistic['yue'] }}</td>
                        </tr>
                    @endforeach
                @endif
                </tbody>
              </table>
            </div>

              <div class="block">
                  <div id="container" style="min-width: 310px; height: 500px; margin: 0 auto"></div>
              </div>

              <input type="hidden" id="dataArr" value='{{$dataArr}}' />
              <input type="hidden" id="xdTotal" value='{{$xdArr}}' />
              <input type="hidden" id="thTotal" value='{{$thArr}}' />

          </div>
        </div>
      </div>
    </section>
  </div>
  <!-- /.content-wrapper -->
  @include('public.bottom')

  <!-- Control Sidebar -->
  @include('public.aside')
  <!-- /.control-sidebar -->
  <!-- Add the sidebar's background. This div must be placed
       immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->
@include('public.javascript')
<script src="{{ asset ("/AdminLTE/bower_components/datatables.net/js/jquery.dataTables.min.js") }}" type="text/javascript"></script>
<script src="{{ asset ("/AdminLTE/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js") }}" type="text/javascript"></script>
<script src="{{ asset ("/AdminLTE/bower_components/jquery-slimscroll/jquery.slimscroll.min.js") }}" type="text/javascript"></script>
{{--<script src="{{ asset ("/AdminLTE/bower_components/fastclick/lib/fastclick.js") }}" type="text/javascript"></script>--}}
<script src="{{ asset ("/js/bootbox.js") }}" type="text/javascript"></script>

<script src="{{ asset ("/AdminLTE/bower_components/moment/min/moment.min.js") }}" type="text/javascript"></script>
<script src="{{ asset ("/AdminLTE/bower_components/bootstrap-daterangepicker/daterangepicker.js") }}" type="text/javascript"></script>

<script src="{{ asset ("/js/lib/Highcharts/5.0.6/js/highcharts.js") }}" type="text/javascript"></script>
{{--<script src="{{ asset ("/js/lib/Highcharts/5.0.6/js/modules/exporting.js") }}" type="text/javascript"></script>--}}

<!-- page script -->
<script>
  $(function(){
      var dataArr = JSON.parse($('#dataArr').val());
      var xdTotal = JSON.parse($('#xdTotal').val());
      var thTotal = JSON.parse($('#thTotal').val());
      console.log(dataArr);
      console.log(xdTotal);
      console.log(thTotal);
      $('#container').highcharts({
          title: {
              text: '订单日收益-折线图',
//              x: -20 //center
          },
          subtitle: {
              text: '',
//              x: -20
          },
          xAxis: {
//              categories: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月']
              categories: dataArr
          },
          yAxis: {
              title: {
                  text: '金额'
              },
              plotLines: [{
                  value: 0,
                  width: 1,
                  color: '#808080'
              }]
          },
          tooltip: {
              valueSuffix: '元'
          },
          series: [
              {
              name: '应付金额',
//              data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
              data: xdTotal
          }, {
              name: '实付金额',
              data: thTotal
          }

          ]
      });


      $('#reportrange').daterangepicker({
          showDropdowns : true,
          showWeekNumbers : false, //是否显示第几周
          ranges : {
           //'最近1小时': [moment().subtract('hours',1), moment()],
           '今日': [moment().startOf('day'), moment()],
           '昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
           '最近7日': [moment().subtract('days', 6), moment()],
           '最近30日': [moment().subtract('days', 29), moment()]
           },
//            opens : 'right', //日期选择框的弹出位置
          buttonClasses : [ 'btn btn-default' ],
          applyClass : 'btn-small btn-primary blue',
          cancelClass : 'btn-small',
          format : 'YYYY-MM-DD', //控件中from和to 显示的日期格式
//          separator : ' to ',
          locale : {
              applyLabel : '确定',
              cancelLabel : '取消',
              fromLabel : '起始时间',
              toLabel : '结束时间',
              customRangeLabel : '自定义',
              daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
              monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',
                  '七月', '八月', '九月', '十月', '十一月', '十二月' ],
              firstDay : 1
          }
      }, function(start, end, label) {//格式化日期显示框

          $('#reportrange input').val(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));
      });


      $('#example1').dataTable({
          "language": {
              "url":"{{ asset ("/AdminLTE/bower_components/datatables.net/chinese.json") }}"
          },
          "aaSorting": [[ 0, "desc" ]],//默认第几个排序
          "bFilter": false,
          "bStateSave": true,//状态保存
          "aoColumnDefs": [
              {"orderable":false,"aTargets":[1,2,3,4]}// 制定列不参与排序
          ]
      });

      @if(session()->has('success'))
         alertMess("{{session()->get('success')}}");
      @endif


  });

</script>
</body>
</html>
